<template>
  <div>
    <!-- <div class="title">
      <el-icon :size="15">
        <Operation />
      </el-icon>
      <div class="flow">请假流程V1</div>
    </div> -->
    <div class="list">
      <div class="task" v-for="task in fs.tasks" :key="task.id">
        <div class="name">{{ task.name }} [{{ task.id }}]</div>
        <div v-if="fs.getPermission()[task.id]" class="control">
          <div v-if="fs.getPermissionConfig().control.visible">
            是否可见: <el-switch v-model="fs.getPermission()[task.id].visible" size="small" />
          </div>
          <div v-if="fs.getPermissionConfig().control.modify">
            允许修改: <el-switch v-model="fs.getPermission()[task.id].modify" size="small" />
          </div>
          <div v-if="fs.getPermissionConfig().control.remove">
            允许删除: <el-switch v-model="fs.getPermission()[task.id].remove" size="small" />
          </div>
        </div>
      </div>
      <div class="task">
        <div class="name">浏览/查看 [{{ FLOW_TASK_KEY_VIEW }}]</div>
        <div>是否可见: <el-switch v-model="fs.getPermission()[FLOW_TASK_KEY_VIEW].visible" size="small" /></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { computed, onMounted, reactive } from 'vue'
import { useFlowStore } from '@/stores/flow'
import { ElSwitch } from 'element-plus'
import { FLOW_TASK_KEY_VIEW } from '@/utils/constant'

const fs = useFlowStore()
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  .flow {
    font-size: $--size-font-medium;
    font-weight: bold;
  }
}
.task {
  padding: 0 0 10px 10px;
  .name {
    margin-bottom: 5px;
    font-weight: bold;
  }
  .control {
    padding-left: 15px;
  }
}
</style>
